<template>
	<view class="active">
		<image src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/goder.png" mode="" style="width: 100%;height: 590rpx;"></image>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="order-type">
			<view class="" style="width: 90%;">
				<van-cell-group>
				  <van-field
				    :value="chondes.username"
				    center
				     clearable
					 @change="onChange"
				    label="房屋面积"
				    placeholder="请输入房屋面积"
				    :border="false"
				    use-button-slot
				  >
				  <van-button slot="button" size="small" type="primary">
				       m2
				     </van-button>
				  </van-field>
				  </van-cell-group>
			</view>
				<view class="list-cell" hover-class="cell-hover">
					<text class="cell-tit">房屋户型</text>
					<input class="input" v-model="chondes.info" placeholder="户型" placeholder-class="placeholder" @click="show = true"/>
					<text class="cell-more yticon icon-you"></text>
				</view>
				<view class="list-cell">
					<text class="cell-tit">所在城市</text>
					<input class="input" v-model="chondes.list" placeholder="" placeholder-class="placeholder" @click="asteachd"/>
					<text class="cell-more yticon icon-you"></text>
				</view>
				<view class="" style="color: #a4a4a4;margin-top: 35rpx; margin-bottom: 35rpx;">
					<span style="margin:65rpx;">简装</span>|
					<span style="margin:65rpx;">精装</span>|
					<span style="margin:65rpx;">豪装</span>
				</view>
			    <u-button @click="compute">立即计算</u-button>
			<u-icon name="bell" color="#6d6d6d" size="24" label="温馨提示" style="margin-left: 30rpx;"></u-icon>
			<view style="color: #b5b5b5; font-size: 24rpx; margin-bottom: 10rpx;margin-left: 35rpx;">· 该报价来自营昕居系统估算，实际价格以量房为准</view>
			<view style="color: #b5b5b5; font-size: 24rpx; margin-left: 35rpx;">· 您还可以向装修顾问了解更多装修知识</view>
		</view>
	
			<u-picker :show="show" :columns="columns" :closeOnClickOverlay="true" @close="show=false" @confirm="adcher" confirmColor="#ff7144"></u-picker>
		<!-- <van-picker :columns="columns" show-toolbar bind:change="onChange" /> -->
		 <van-popup :show="showis" position="bottom" @click-overlay="catusion">
	        <van-area :area-list="areaList" v-show="showis"  @cancel="showis = false" @confirm="acvit" />
			</van-popup>
	</view>
</template>

<script>
		import {regionines} from '@/employees/region.js'
		import { areaList } from '@/employees/vanlist.js';
	 export default {
	        data() {
	            return {
					show: false,
					showis:false,
					columns:[
						['1室', '2室', '3室','4室'],
						['0厅', '1厅', '2厅'],
						['0厨', '1厨'],
						['0卫', '1卫','2卫'],
						['0阳台','1阳台','2阳台']
					],
					chondes:{
						info:'3室,2厅,1厨,2卫,1阳台',
						list:'陕西省,西安市',
						username:'100',
					},
					areaList:{}
	              }
	        },
			onLoad() {
			   this.areaList = areaList
			},
			methods:{
				// 返回上一页
				navBack(){
					uni.navigateBack();
				},
				// 打开城市弹出框
				asteachd(){
					this.showis = true
				},
				// 点击遮罩层关闭
				catusion(){
					this.showis = false
				},
				// 选择房屋类型
				adcher(e){
					this.chondes.info = e.value
					this.show = false
				},
				// 选择城市
				acvit(e){
					const code = e.detail.values
					let i = []
					code.forEach(item => {
						i.push(item.name)
					})
					this.chondes.list = i
					this.showis = false
				},
				// 输入房屋面积
				onChange(e){
					this.chondes.username = e.detail
				},
				// 点击立即计算
				compute(){
					console.log(this.chondes)
				}
			}
	    }
</script>

<style lang="scss">
	.active{
		background-color: #f1f1f1;
	}
	.back-btn{
		position:absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: #fff;
	}
	.order-type{
		width: 85%;
		height: 860rpx;
		background-color: #fff;
        border-radius: 25px;
		margin: 0 auto;
		transform: translateY(-55px);
		padding-top: 40rpx;
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
			margin-top: 16upx; 
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right:10upx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}
	.u-icon{
		margin-left: 35rpx !important;
		margin-bottom: 20rpx !important;
	}
	.u-button--info{
		background-color: #ff7144 !important;
		color: #fff !important;
		font-size: 32rpx;
		width: 90% !important;
		border-radius: 20rpx !important;
		border: 1px solid #ff7144 !important;
		margin-bottom: 35rpx !important;
		height: 100rpx !important;
	}
</style>